import React from 'react';
import { Button, Form, Select } from 'antd';
import { useForm } from 'antd/lib/form/Form';

import DataCard from '@/components/DataCard';
import InfoFormItem from '@/components/InfoFormItem';
import { STYLE_WIDTH } from '@/utils/const';

const { Option } = Select;

// 设备类型
const deviceTypes = [
  { value: '', name: '全部' },
  { value: 'common', name: '普通摄像机' },
  { value: 'sphere', name: '球机' },
  { value: 'img_capture', name: '抓拍机' },
  { value: 'soldier', name: '单兵摄像机' },
  { value: 'cig', name: '网关设备' },
  { value: 'other', name: '其他' },
];

// 功能类型
const functionTypes = [
  { value: '', name: '全部' },
  { value: 'movement', name: '移动侦测' },
  { value: 'face', name: '人脸识别' },
  { value: 'body', name: '人体识别' },
  { value: 'car', name: '车辆识别' },
  { value: 'licence_plate', name: '车牌识别' },
  { value: 'other', name: '其他' },
];

// 场所类型
const placeTypes = [
  { value: '', name: '全部' },
  { value: '幼⼉儿园', name: '幼⼉儿园' },
  { value: '医院', name: '医院' },
  { value: '⼩区', name: '⼩区' },
  { value: '酒店', name: '酒店' },
  { value: '学校', name: '学校' },
  { value: '⼩学', name: '⼩学' },
  { value: '中学', name: '中学' },
  { value: '高校', name: '高校' },
  { value: '车站', name: '车站' },
  { value: '娱乐场所', name: '娱乐场所' },
  { value: 'KTV', name: 'KTV' },
  { value: '加油站', name: '加油站' },
  { value: '旅社', name: '旅社' },
  { value: '其他', name: '其他' },
];
// 状态类型
const statusTypes = [
  // 接口无全部字段 自造判断是否携带
  { value: 1000, name: '全部' },
  { value: 0, name: '离线' },
  { value: 1, name: '在线' },
];

// 场景类型
const sceneTypes = [
  { value: 0, name: '全部' },
  { value: 1, name: '视频监控' },
  { value: 2, name: '智慧平安社区' },
  { value: 3, name: '社会资源整合' },
  { value: 4, name: '视频图像分析' },
  { value: 5, name: '公安视频监控' },
];

// 设备接入类型
const accessTypes = [
  { value: '', name: '全部' },
  { value: 'CIG-M', name: 'CIG-M' },
  { value: 'CIG-S', name: 'CIG-S' },
  { value: 'CIG_M', name: 'CIG_M' },
  { value: 'SDK', name: 'SDK接入' },
  { value: 'GB', name: 'GB接入' },
  { value: 'VC-BOX', name: '盒子接入' },
];

const Resources = (props: { loading: boolean; data: any }) => {
  const { loading, data = {} } = props;
  const [form] = useForm();

  return (
    <DataCard title="资源总览" loading={loading}>
      {/* 可选项 */}
      <Form layout="inline" form={form}>
        <Form.Item name="device_type" initialValue="" label="设备类型">
          <Select style={STYLE_WIDTH}>
            {deviceTypes.map(item => (
              <Option value={item.value} key={item.name}>
                {item.name}{' '}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="function" initialValue="" label="功能类型">
          <Select style={STYLE_WIDTH}>
            {functionTypes.map(item => (
              <Option value={item.value} key={item.name}>
                {item.name}{' '}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="place" initialValue="" label="场所类型">
          <Select style={STYLE_WIDTH}>
            {placeTypes.map(item => (
              <Option value={item.value} key={item.name}>
                {item.name}{' '}
              </Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item name="access_types" initialValue="" label="设备接入类型">
          <Select style={STYLE_WIDTH}>
            {accessTypes.map(item => (
              <Option value={item.value} key={item.name}>
                {item.name}{' '}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="scene" initialValue={0} label="场景">
          <Select style={STYLE_WIDTH}>
            {sceneTypes.map(item => (
              <Option value={item.value} key={item.name}>
                {item.name}{' '}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="status" label="状态" initialValue={1000}>
          <Select style={STYLE_WIDTH}>
            {statusTypes.map(item => (
              <Option value={item.value} key={item.name}>
                {item.name}{' '}
              </Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item>
          <Button
            onClick={() => {
              form.resetFields();
            }}
          >
            {' '}
            重置筛选
          </Button>
        </Form.Item>
      </Form>
      {/* 数据 */}
      <Form layout="inline" style={{ marginBottom: 16 }}>
        <InfoFormItem label="设备数量" {...STYLE_WIDTH}>
          {data.devices} 个
        </InfoFormItem>
        <InfoFormItem label="对接平台（国标接入）" {...STYLE_WIDTH}>
          {data.down_platforms} 个
        </InfoFormItem>
      </Form>
    </DataCard>
  );
};

export default Resources;
